﻿@{
    Layout = null;
    int MaxUploadSize = ViewBag.MaxUploadSize;
    int MaxUploadCount = ViewBag.MaxUploadCount;
    string acceptExtName = ViewBag.UploadExtNames;
    string fileUseage = ViewBag.Useage;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5多文件预览上传</title>
</head>
<body>
    <div id="zyUploadContainer" class="zyUploadContainer"></div>
    <script src="~/lib/PearAdminLayui/component/layui/layui.js" asp-append-version="true"></script>
    <script type="text/javascript" src="~/lib/PearAdminLayui/component/pear/pear.js" asp-append-version="true"></script>
    <script type="text/javascript" src="~/dist/js/utils/frontendapiconfig.min.js" asp-append-version="true"></script>
    <script type="text/javascript">
        layui.use(['jquery', 'zyUpload', 'lodash'], function () {
            var layeroIndex = 0;
            if (parent.layer) {
                layeroIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引
            }
            var zyUpload = layui.zyUpload,
                $ = layui.jquery,
                lodash = layui.lodash;
            var addedFileList = [];
            var fileUseage = "@fileUseage";
            zyUpload.render({
                elem: '#zyUploadContainer',
                acceptFiles: "@acceptExtName",
                maxUploadCount: @MaxUploadCount ,
                maxUploadSize: @MaxUploadSize ,
                width: "650px",                     // 宽度
                height: "400px",                    // 宽度
                itemWidth: "120px",                 // 文件项的宽度
                itemHeight: "100px",                // 文件项的高度
                url: frontendapiConfig.zyUploadApi, // 上传文件的路径
                multiple: true,                     // 是否可以多个文件上传
                dragDrop: true,                     // 是否可以拖动上传文件
                del: true,                          // 是否可以删除文件
                edit: false,                        // 是否可以编辑名称
                displayImage: false,                // 当选择上传文件是图片时是否在预览中显示图片，否则显示预设文件类型图片
                /* 外部获得的回调接口 */
                onSelect: function (files, allFiles) {     // 选择文件的回调方法
                    //console.info("当前选择了以下文件：");
                    //console.info(files);
                    //console.info("之前没上传的文件：");
                    //console.info(allFiles);
                    layui.each(files, function (index, item) {
                        if (item.Useage) {
                            item.Useage = fileUseage;
                        }
                    });
                    if (layeroIndex > 0) {
                        parent.layer.iframeAuto(layeroIndex);
                    }
                },
                onDelete: function (file, surplusFiles) {    // 删除一个文件的回调方法
                    //改由外部统一删除
                    if (file.Id) {
                        if (file.Id > 0) {
                            addedFileList = lodash.reject(addedFileList, ['Id', file.Id]);
                        }
                    }
                    //if (file.Id) {
                    //    if (file.Id > 0) {
                    //        http.get(frontendapiConfig.mediafileDelte, { mediaFileId: file.Id }, null).done(
                    //            function (response) {
                    //                if (response.state && response.state === 200) {
                    //                    if (!response.Success) {
                    //                        popup.failure("服务器端文件删除失败");
                    //                    }
                    //                }
                    //        });
                    //    }
                    //}
                    return true;
                },
                onSuccess: function (file) {                // 文件上传成功的回调方法
                    addedFileList.push(file);
                    //console.info("此文件上传成功：");
                    //console.info(file);
                },
                onFailure: function (file, error) {          // 文件上传失败的回调方法
                    console.info("此文件上传失败：");
                    console.info(error);
                }
            });
        });
    </script>
</body>
</html>


